<!-- @format -->

<template>
  <div class="message-example">
    <h2 class="title">消息提示框示例</h2>

    <div class="button-group">
      <comp-button @click="showSuccess" text="成功消息" />
      <comp-button @click="showWarning" text="警告消息" />
      <comp-button @click="showError" text="错误消息" />
      <comp-button @click="showInfo" text="信息消息" />
    </div>

    <!-- <div class="button-group">
      <comp-button @click="showCustomDuration" text="自定义持续时间" />
      <comp-button @click="showWithClose" text="显示关闭按钮" />
      <comp-button @click="showCustomStyle" text="自定义样式" />
      <comp-button @click="closeAllMessages" text="关闭所有消息" />
    </div> -->
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import CompButton from '@/components/comp-button.vue';
  import Message from './message';

  // 基础消息类型示例
  const showSuccess = () => {
    Message.success('操作成功！');
  };

  const showWarning = () => {
    Message.warning('警告：请注意此操作！');
  };

  const showError = () => {
    Message.error('操作失败，请重试！');
  };

  const showInfo = () => {
    Message.info('这是一条信息提示');
  };

  // 自定义选项示例
  const showCustomDuration = () => {
    Message({
      message: '这条消息将显示10秒钟',
      type: 'info',
      duration: 10000,
    });
  };

  const showWithClose = () => {
    Message({
      message: '这条消息可以手动关闭',
      type: 'success',
      showClose: true,
      duration: 0, // 不会自动关闭
    });
  };

  const showCustomStyle = () => {
    Message({
      message: '自定义样式的消息',
      type: 'info',
      customClass: 'custom-message',
      customStyle: {
        backgroundColor: '#f8f9fa',
        border: '2px solid #ddd',
        fontWeight: 'bold',
      },
    });
  };

  const closeAllMessages = () => {
    Message.closeAll();
  };
</script>

<style lang="scss" scoped>
  .message-example {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  .title {
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
  }

  .button-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  @media screen and (max-width: 768px) {
    .button-group {
      flex-direction: column;
      align-items: center;
    }
  }
</style>
